<template>
	<view class="">
		<view class="personal_item">基本信息</view>
		<view class="information">
			<view class="information_item">
				<view class="information_item_i">头像</view>
				<view class="information_item_i" @click="upheader">
					<image v-if="userInfo.Avatar" :src="userInfo.Avatar" mode="aspectFill"></image>
					<image v-else src="https://ykp-hz.oss-cn-hangzhou.aliyuncs.com/4e65404b-d6e7-4244-9917-1176f56f0b2c.png" mode=""></image>
					<i class="icon">&#xe637;</i>
				</view>
			</view>
			<view class="information_item">
				<view class="information_item_i">昵称</view>
				<view class="information_item_i information_input">
					<!-- <span>王磊</span> -->
					<input type="text" v-model="userInfo.MemberName" placeholder="请输入昵称" placeholder-class="place" @blur="edit_userInfo()" />
				</view>
			</view>
			<view class="information_item">
				<view class="information_item_i">ID</view>
				<view class="information_item_i">{{ userInfo.IdCode }}</view>
			</view>
		</view>
		<view class="personal_item">报名卡信息</view>
		<view class="information">
			<view class="information_item">
				<view class="information_item_i">姓名</view>
				<view class="information_item_i information_input">
					<!-- <span>王磊</span> -->
					<input type="text" v-model="userSign.name" placeholder="请输入真实姓名" placeholder-class="place" @blur="update" />
				</view>
			</view>
			<view class="information_item">
				<view class="information_item_i">性别</view>
				<picker :range="sexlist" @change="changesex" class="information_item_i">
					<view v-if="!userSign.sex">
						<text>去设置</text>
						<i class="icon">&#xe637;</i>
					</view>
					<view v-else>
						<text>{{ userSign.sex }}</text>
						<i class="icon">&#xe637;</i>
					</view>
				</picker>
			</view>
			<view class="information_item">
				<view class="information_item_i">联系方式</view>
				<!-- <view class="information_item_i">16602197016</view> -->
				<view class="information_item_i information_input">
					<!-- <span>王磊</span> -->
					<input type="number" v-model="userSign.mobile" placeholder="请输入手机号" placeholder-class="place" @blur="update" />
				</view>
			</view>
			<!-- <view class="information_item">
				<view class="information_item_i">证件类型</view>
				<picker :range="cardlist" @change="changecardtype" class="information_item_i">
					<view v-if="!userSign.card_type">
						去设置
						<i class="icon">&#xe637;</i>
					</view>
					<view v-else>
						{{ userSign.card_type }}
						<i class="icon">&#xe637;</i>
					</view>
				</picker>
			</view> -->
			<view class="information_item">
				<view class="information_item_i">身份证</view>
				<view class="information_item_i information_input">
					<input type="text" v-model="userSign.card_no" placeholder="请输入身份证号" placeholder-class="place" @blur="update" />
				</view>
			</view>
		<!-- 	<view class="information_item">
				<view class="information_item_i">生日</view>
				<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange" class="information_item_i">
					<view v-if="!userSign.birth">
						去设置
						<i class="icon">&#xe637;</i>
					</view>
					<view v-else>
						<text>{{ userSign.birth }}</text>
						<i class="icon">&#xe637;</i>
					</view>
				</picker>
			</view> -->
			<!-- 设置生日新的 -->
			<view class="information_item">
				<view class="information_item_i">生日</view>
				<view class="information_item_i information_in" @tap="chooseBirth">
					<span v-if="userSign.birth">{{ userSign.birth }}</span>
					<span v-else>去设置</span>
					<i class="icon icon_q">&#xe637;</i>
				</view>
			</view>
			<!-- 设置血型 -->
			<view class="information_item">
				<view class="information_item_i">血型</view>
				<picker :range="bloodlist" @change="changeblood" class="information_item_i">
					<view v-if="!userSign.blood">
						去设置
						<i class="icon">&#xe637;</i>
					</view>
					<view v-else>
						{{ userSign.blood }}
						<i class="icon">&#xe637;</i>
					</view>
				</picker>
			</view>
			<view class="information_item">
				<view class="information_item_i">邮箱</view>
				<view class="information_item_i information_input">
					<input type="text" v-model="userSign.emall" placeholder="请输入邮箱" placeholder-class="place" @blur="update" />
				</view>
			</view>
			<view class="information_item">
				<view class="information_item_i">跑龄</view>
				<view class="information_item_i information_input">
					<input type="text" v-model="userSign.run_age" placeholder="请输入跑龄" placeholder-class="place" @blur="update" />
				</view>
			</view>
			<!-- <view class="information_item">
				<view class="information_item_i">国际</view>
				<view class="information_item_i information_input">
					<input type="text" v-model="info.email" placeholder="请输入国籍" placeholder-class="place" @blur="edit_userSign" />
				</view>
			</view> -->
			<view class="information_item">
				<view class="information_item_i">地区</view>
				<view class="information_item_i information_in" @tap="choosearea">
					<span v-if="userSign.city">{{ userSign.city }}</span>
					<span v-else>去设置</span>
					<i class="icon icon_q">&#xe637;</i>
				</view>
			</view>
			<!-- 	<view class="information_item">
				<view class="information_item_i"><span>收货地址</span></view>
				<view class="information_item_i information_input">
					<input type="text" v-model="userSign.adress" placeholder="请输入收获地址" placeholder-class="place" @blur="update" />
				</view>
			</view> -->
			<view class="information_item">
				<view class="information_item_i">紧急联系人</view>
				<view class="information_item_i information_input">
					<!-- <span>天香</span> -->
					<input type="text" v-model="userSign.contact_person" placeholder="请输入紧急联系人的姓名" placeholder-class="place" @blur="edit_userSign" />
				</view>
			</view>
			<view class="information_item">
				<view class="information_item_i">紧急联系方式</view>
				<view class="information_item_i information_input">
					<!-- <span>16565656565</span> -->
					<input type="text" v-model="userSign.contact_mobile" placeholder="请输入紧急联系方式" placeholder-class="place" @blur="update" />
				</view>
			</view>
			<view class="information_item">
				<view class="information_item_i">服装尺码</view>
				<picker :range="clothlist" @change="changecloth" class="information_item_i">
					<view v-if="!userSign.dress_size">
						<text>去设置</text>
						<i class="icon">&#xe637;</i>
					</view>
					<view v-else>
						<text>{{ userSign.dress_size }}</text>
						<i class="icon">&#xe637;</i>
					</view>
				</picker>
			</view>
			<view class="information_item">
				<view class="information_item_i ">鞋子尺码</view>
				<picker :range="shoeslist" @change="changeshoes" class="information_item_i">
					<view v-if="!userSign.shoes_size">
						<text>去设置</text>
						<i class="icon">&#xe637;</i>
					</view>
					<view v-else>
						<text>{{ userSign.shoes_size }}</text>
						<i class="icon">&#xe637;</i>
					</view>
				</picker>
			</view>
		</view>
		<!-- 选择地址 -->
		<w-picker
			mode="region"
			:defaultVal="['安徽省', '合肥市', '包河区']"
			:areaCode="['34', '3401', '340111']"
			:hideArea="true"
			@confirm="onConfirmarea"
			ref="region"
			:timeout="true"
		></w-picker>
		<!-- 选择生日 -->
		<w-picker 
		    mode="date" 
		    :current="true" 
		    @confirm="onConfirmBirth"
		    :disabledAfter="true"
		    ref="chooseBirth" 
		    themeColor="#f00"
		></w-picker>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
	</view>
</template>

<script>
import wPicker from '@/components/w-picker/w-picker.vue';
import loading from '@/components/loading/loading.vue';
import navigation from '@/components/navigation/navigation.vue';
function getDate(type) {
	const date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();

	if (type === 'start') {
		year = year - 60;
	} else if (type === 'end') {
		year = year + 0;
	}
	month = month > 9 ? month : '0' + month;
	day = day > 9 ? day : '0' + day;

	return `${year}-${month}-${day}`;
}
import uniPopupt from '@/components/uni-popupt/uni-popup.vue';
import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools';
export default {
	components: { uniPopupt, wPicker, loading, navigation },
	data() {
		return {
			loadflag: true,
			// 血型
			bloodtype: '',
			copyed_src: 'https://jifendui.oss-cn-beijing.aliyuncs.com/APP/1-01banner.png',
			header_img: '',
			sex_index: 3,
			info: {},
			endYear: 0,
			dataSet: {
				startYear: 1920,
				endYear: 0,
				defaultValue: '2000/1/1'
			},
			fff: 'false',
			// 性别列表
			sexlist: ['男', '女'],
			sex_index: 5,
			bloodlist: ['A', 'B', 'C'],
			cardlist: ['身份证', '暂居证', '驾驶证'],
			blood_index: 5,
			clothlist: ['S', 'M', 'L', 'XL', 'XXl', 'XXL'],
			cloth_index: 6,
			shoeslist: ['36', '37', '38', '39', '40', '41', '42', '43', '44'],
			shoes_index: 80,
			// 时间
			date: getDate({
				format: true
			}),
			birthflag: false,
			datebirth: '',
			startDate: getDate('start'),
			endDate: getDate('end'),
			// 城市
			city: false,
			userInfo: {},
			userSign: {},
			img_type: ''
		};
	},
	mounted() {
		this.getUserInfo();
		this.getUserSign();
	},
	methods: {
		// 修改报名信息
		edit_userSign() {
			this.ajax('user/editUserSign', {
				data: {
					name: this.userSign.name,
					mobile: this.userSign.mobile,
					sex: this.userSign.sex,
					card_no: this.userSign.card_no,
					birth: this.userSign.birth,
					blood: this.userSign.blood,
					nationality: '中国',
					run_age: this.userSign.run_age,
					card_type: '身份证',
					emall: this.userSign.email,
					city: this.userSign.city,
					contact_person: this.userSign.contact_person,
					contact_mobile: this.userSign.contact_mobile,
					dress_size: this.userSign.dress_size,
					shoes_size: this.userSign.shoes_size
				},
				success: res => {
					if (!res.code) return this.toast(res.msg);
					 // console.log (res);
				}
			});
		},
		update() {
			if (this.userSign.mobile) {
				if (!/^1[3456789]\d{9}$/.test(this.userSign.mobile)) {
					this.toast('手机号位数不正确，请重填');
					this.userSign.mobile = '';
					return ;
				}
			}
			 if (this.userSign.contact_mobile) {
				if (!/^1[3456789]\d{9}$/.test(this.userSign.contact_mobile)) {
					this.toast('手机号位数不正确，请重填');
					this.userSign.contact_mobile = '';
					return false;
				}
				}
				if (this.userSign.emall) {
					 // console.log (12);
					var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
					if (!reg.test(this.userSign.emall)) {
						this.toast('邮箱格式不正确');
						this.userSign.emall = '';
						return false;
					}
				}
				if (this.userSign.card_no) {
					 // console.log (12);
					var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
					if(!regIdCard.test(this.userSign.card_no)) {
						this.toast('身份证不正确,请正确输入');
						this.userSign.card_no = '';
						return false;
					}
				}
			this.edit_userSign();
		},
		// 修改用户信息
		edit_userInfo() {
			this.ajax('user/editUserInfo', {
				data: {
					Avatar: this.userInfo.Avatar,
					MemberName: this.userInfo.MemberName
				},
				success: res => {
					// if(res.code == 0)return this.toast(res.msg);
					 // console.log (res);
				}
			});
		},
		// 获取用户信息
		getUserInfo() {
			this.ajax('user/userInfo', {
				success: res => {
					 // console.log (res);
					this.userInfo = res.msg;
				}
			});
		},
		// 获取用户报名信息
		getUserSign() {
			this.ajax('user/userSign', {
				success: res => {
					 // console.log (res);
					 // console.log (res.msg.emall);
					if(res.msg.emall  == null ) {
						res.msg.emall = ''
					}
					this.userSign = res.msg;
					 // console.log (this.userSign.emall);
					this.loadflag = false;
				}
			});
		},
		upheader() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: res => {
					var sys_info = uni.getSystemInfoSync();
					if (sys_info.version) {
						uni.showLoading({
							title: '图片上传中'
						});
						var arr = res.tempFilePaths[0].split('/');
						var filename = arr[arr.length - 1];
						this.oss_upload(res, filename, {
							success: res => {
								this.userInfo.Avatar = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/' + filename;
								// this.header_img = filename;
								uni.hideLoading();
								this.edit_userInfo();
							},
							fail: ress => {}
						});
					} else {
						pathToBase64(res.tempFilePaths[0])
							.then(base64 => {
								//  // console.log (base64,111)
								this.header_img = base64;
								this.img_type = base64.split(';')[0].split('/')[1];
								uni.showLoading({
									title: '图片上传中'
								});
								// 获取图片信息
								//获取文件名称
								var arr = res.tempFilePaths[0].split('/');
								var filename = arr[arr.length - 1];
								var timestamp = new Date().getTime();
								var name = timestamp + '.' + this.img_type;
								this.oss_upload(res, name, {
									success: res => {
										this.userInfo.Avatar = 'https://ykp-new.oss-cn-hangzhou.aliyuncs.com/' + name;
										// this.header_img = filename;
										uni.hideLoading();
										this.edit_userInfo();
									},
									fail: ress => {}
								});
							})
							.catch(error => {
								console.error(error);
							});
					}
				}
			});
		},
		bindDateChange(e) {
			this.birthflag = true;
			this.date = e.target.value;
			this.datebirth = e.target.value;
			this.userSign.birth = e.target.value;
			this.edit_userSign();
		},
		// 选择证件类型
		changecardtype(e) {
			 // console.log (e);
			this.userSign.card_type = this.cardlist[e.target.value];
			this.edit_userSign();
		},
		// 选择性别
		changesex(e) {
			this.userSign.sex = this.sexlist[e.target.value];
			this.edit_userSign();
		},
		changeblood(e) {
			this.userSign.blood = this.bloodlist[e.target.value];
			 // console.log (this.userSign.blood);
			this.edit_userSign();
		},
		changecloth(e) {
			this.userSign.dress_size = this.clothlist[e.target.value];
			this.edit_userSign();
		},
		changeshoes(e) {
			this.userSign.shoes_size = this.shoeslist[e.target.value];
			this.edit_userSign();
		},
		// 选择城市
		choosearea() {
			 // console.log (111);
			this.$refs.region.show();
		},
		onConfirmarea(e) {
			 // console.log (e);
			this.userSign.city = e.checkArr[0] + '/' + e.checkArr[1];
			this.edit_userSign();
		},
		chooseBirth () {
			this.$refs.chooseBirth.show();
		},
		onConfirmBirth (e) {
			 // console.log (e);
			this.userSign.birth = e.result
		}
	}
};
</script>

<style lang="less" scoped>
.popup_choose {
	width: 100%;
	background-color: #ffffff;
	padding: 30upx;
	box-sizing: border-box;
	display: flex;
	.ch_sex_item {
		width: 80upx;
		height: 40upx;
		border-radius: 20upx;
		border: 2upx solid #e1e1e1;
		font-size: 28upx;
		color: #333333;
		text-align: center;
		line-height: 40upx;
		margin-right: 30upx;
	}
	.ch_sex_item_item {
		border: 2upx solid #8530e8;
		color: #8530e8;
	}
}
// 性别弹窗
.sex_select {
	width: 400upx;
	background-color: #ffffff;
	border-radius: 20upx;
	padding: 30upx;
	box-sizing: border-box;
	.sex_select_item {
		box-sizing: border-box;
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		border-bottom: 2upx solid #e1e1e1;
		font-size: 32upx;
		color: #333333;
		line-height: 68upx;
	}
	.sex_select_item:last-child {
		border-bottom: 0;
	}
}
.personal_item {
	font-size: 32upx;
	color: #999;
	width: 100%;
	background-color: #f2f2f2;
	height: 84upx;
	line-height: 84upx;
	padding: 0 30upx;
	box-sizing: border-box;
	span {
		font-size: 22upx;
		color: #333333;
		font-weight: 400;
		margin-left: 15upx;
	}
}
.information {
	background-color: #ffffff;
	padding: 0 30upx;
	box-sizing: border-box;
	.information_item {
		width: 100%;
		height: 102upx;
		border-bottom: 2upx solid #e1e1e1;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		.information_input {
			text-align: right;
		}
		.information_in {
			display: flex;
			align-items: center !important;
			line-height: 100upx !important;
			.icon_q {
				margin-top: 4upx;
			}
		}
		.information_item_i {
			display: flex;
			align-items: center;
			color: #333333;
			line-height: 100upx;
			font-size: 28upx;
			// line-height: 120upx;
			image {
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				margin-right: 15upx;
			}
			text {
				color: #333333;
				line-height: 100upx;
				font-size: 28upx;
			}
			.icon {
				font-size: 24upx;
				line-height: 100upx;
				color: #999999;
				margin-left: 4upx;
			}
		}
	}
	.information_item:last-child {
		border-bottom: 0;
	}
}
</style>
